<template>
  <div>
    <div id="thirdPayAll" ref="thirdPayAll" class="box third-pay-all" />
  </div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
import { AjaxToken } from "@/api/common";
export default {
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      mychart: null,
      list: [],
    };
  },

  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    selectType: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    var box = document.getElementById("thirdPayAll");
    const erd = elementResizeDetectorMaker();
    const that = this;
    erd.listenTo(document.getElementById("thirdPayAll"), function (element) {
      that.$nextTick(function () {
        // 使echarts尺寸重置
        that.mychart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.mychart.resize();
    });
  },
  methods: {
    initChart() {
      this.mychart = this.$echarts.init(this.$refs.thirdPayAll);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",

        target: document.querySelector(".linedaybox"),
      });
      backstage.GetDayReconciliation(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetDayReconciliation: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetDayReconciliation",
        params,
        "post",
        function (res) {
          console.log(res);
          loading.close()
          var option = {
         
            title: {
              text: '第三方支付总额',
              left: 20,
              top:20,
              // 原画标题调整
              textStyle: {
                // 文字颜色
                color: 'rgba(0, 0, 0, 0.85)',
                // 字体风格,'normal','italic','oblique'

                // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight: 'bold',
                // 字体系列
                fontFamily: 'sans-serif',
                // 字体大小
                fontSize: 16
              },
              // subtext: '单位：台' // 副标题文本

            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            grid: {
              borderWidth: 0,
              top: 110,
              left:50,
              right:120,
              bottom: 40,
              textStyle: {
                color: "#fff",
              },
            },
             legend: {
              top: "center",
              right: 10,
              orient: "vertical",
              data: ["哆啦宝", "直连微信",'直连支付宝', "哆啦宝-折线","直连微信-折线","直连支付宝-折线"],
            },
            calculable: true,
            xAxis: [
              {
                type: "category",
                axisLine: {
                  lineStyle: {
                    color: "#90979c",
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                },
                // data: xData,
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
              },
            ],
            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    color: "#90979c",
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                },
                splitArea: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "哆啦宝",
                type: "bar",
                stack: "总量",
                barMaxWidth: 35,
                barGap: "10%",
                itemStyle: {
                  normal: {
                    color: "#13C2C2",
                    label: {
                      show: true,
                      textStyle: {
                        color: "#fff",
                      },
                      position: "inside",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
                data: [
                  198.66, 330.81, 151.95, 160.12, 222.56, 229.05, 128.53,
                  250.91, 224.47, 473.99, 126.85, 260.5,
                ],
              },

              {
                name: "直连微信",
                type: "bar",
                stack: "总量",
                itemStyle: {
                  normal: {
                    color:  "#FACC14",
                    barBorderRadius: 0,
                    label: {
                      show: true,
                      position: "inside",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
                data: [
                  82.89, 67.54, 62.07, 59.43, 67.02, 67.09, 35.66, 71.78, 81.61,
                  78.85, 79.12, 72.3,
                ],
              },
              {
                name: "直连支付宝",
                type: "bar",
                stack: "总量",
                itemStyle: {
                  normal: {
                    color: "#8543E0",
                    barBorderRadius: 0,
                    label: {
                      show: true,
                      position: "top",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
                data: [
                  99, 50, 66, 100, 56, 78, 40, 88, 80,
                  87, 84,57,
                ],
              },
              {
                name: "哆啦宝-折线",
                type: "line",
                stack: "总量",
                symbolSize: 10,
                symbol: "circle",
                itemStyle: {
                  normal: {
                    color: "#13C2C2",
                    barBorderRadius: 0,
                    label: {
                      show: true,
                      position: "top",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
               data: [
                  198.66, 330.81, 151.95, 160.12, 222.56, 229.05, 128.53,
                  250.91, 224.47, 473.99, 126.85, 260.5,
                ],
              },
              {
                name: "直连微信-折线",
                type: "line",
                stack: "总量",
                symbolSize: 10,
                symbol: "circle",
                itemStyle: {
                  normal: {
                    color: "#FACC14",
                    barBorderRadius: 0,
                    label: {
                      show: true,
                      position: "top",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
              data: [
                  82.89, 67.54, 62.07, 59.43, 67.02, 67.09, 35.66, 71.78, 81.61,
                  78.85, 79.12, 72.3,
                ],
              },
              {
                name: "直连支付宝-折线",
                type: "line",
                stack: "总量",
                symbolSize: 10,
                symbol: "circle",
                itemStyle: {
                  normal: {
                    color:"#8543E0",
                    barBorderRadius: 0,
                    label: {
                      show: true,
                      position: "top",
                      formatter: function (p) {
                        return p.value > 0 ? p.value : "";
                      },
                    },
                  },
                },
              data: [
                  99, 50, 66, 100, 56, 78, 40, 88, 80,
                  87, 84,57,
                ],
              },
            ],
          };
          thisobj.mychart.setOption(option);

          window.addEventListener("resize", () => {
            thisobj.mychart.resize();
          });
        },
        function (err) {}
      );
    }, 1 * 1000);
  },
};
</script>

<style scoped>
.box {
  /* width: 100%; */
  /* height: 28.5rem; */
  height: 450px;
}
</style>
